import React from 'react';
import './home.scss';
import { DatePicker, Table  } from 'antd';
import cookie from 'react-cookies';
import moment from 'moment';
import { List } from 'antd';
import { getAccountByDate, warningGateList } from '../../../api/dataCenter'
import store from '../../../redux/store';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb'
import echarts from 'echarts';
import { getProjectInfo , getUserProjectInfo } from '../../../api/hardwareCenter'
const { Column } = Table;

const weekFormat = 'YYYY-MM-DD';
const monthFormat = 'YYYY-MM';
const yearFormat = 'YYYY';


const customWeekStartEndFormat = value =>
    `${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
        .endOf('week')
        .format(weekFormat)}`;

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name:'',
            activeUlId:1,
            activeTabs:0,
            RangePickerVal:'',
            tabsList:['周','月','年'],
            start_time: `${moment().startOf('week').format(weekFormat)}`,
            end_time: `${moment().endOf('week').format(weekFormat)}`,
            year: `${moment().format(yearFormat)}`,
            month: `${moment().format(monthFormat)}`,
            current:1,
            total_data:{},
            warningList:[],
            proArray:[],
        }
    }   


    ulClick = (id) => {
        console.log(id)
        this.setState({
            activeUlId:id,
        },() => {
            this.getList();
        })
    }
    initCharts = data => {
        console.log(data)
        const { activeTabs } = this.state;
        console.log(activeTabs)
        const myChart = echarts.init(document.getElementById(`main`));
        // 绘制图表
        myChart.setOption({
            tooltip: {},
            color:'#2F3CF2',
            xAxis: {
                type: 'category',
                data: data.x_arr,
                axisLine: {
                    lineStyle:{
                        color:'#C3C4D1'
                    }
                },
                axisLabel: {
                    color: '#7280B3',
                    margin: 6,
                    lineHeight: 20,
                    fontSize:14
                },
                axisTick: {
                    show: false
                },
                splitLine:{
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel:{
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '销量',
                type: activeTabs === 2 ? 'bar' : 'line' ,
                symbol: 'circle',
                symbolSize: 9,
                data: data.y_arr
            }]
        
        });
    }

    componentDidMount() {
        console.log('DidMount')
        this.getProjectInfo();
        this.setState({
            name:store.getState().addRole,
        })
    }

    getProjectInfo = () => {
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'state': 2
        }
        getUserProjectInfo(post_data).then(res => {
            console.log(res)
            this.setState({
                activeUlId: res.data[0].id,
                proArray: res.data
            },()=>{
                this.getList();
            })
        })
    }

    //周控件
    onChangeWeek = (e, valString) =>{
        console.log(e, valString)
        this.setState({
            start_time: valString[0],
            end_time: valString[1],
        }, () => {
            this.getList();
        })
    }
    //月控件
    onChangeMonth = (e, valString) => {
        console.log(e, valString)
        this.setState({
            month: valString
        }, () => {
            this.getList();
        })
    }
    //年控件
    onChangeYear = (e, valString) => {
        console.log(e, valString)
        this.setState({
            year: valString
        },()=>{
            this.getList();
        })
    }
    //选择时间格式
    setTime = e => {
        console.log(e)
        this.setState({
            activeTabs:e
        },()=>{
            this.getList();
        })
    }

    //获取列表数据
    getList = () => {
        const _this = this;
        const { activeUlId, activeTabs, start_time, end_time, year, month } = this.state;
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'project_id': activeUlId,
            'start_time': activeTabs === 0 ? start_time : '',
            'end_time': activeTabs === 0 ? end_time : '',
            'year': activeTabs === 2 ? year : '',
            'month': activeTabs === 1 ? month : ''
        }
        console.log(post_data)
        getAccountByDate(post_data).then(res => {
            console.log(res)
            _this.initCharts(res.data)
            this.getWarningGateList();
        })
    }
    //校验失败记录
    getWarningGateList = () => {
        const { activeUlId } = this.state;
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'project_id': activeUlId,
            'start_time': '',
            'end_time': '',
            'warning_type': '',
            'search_text': '',
            'page': ''
        }
        warningGateList(post_data).then(res => {
            console.log(res)
            this.setState({
                total_count: res.data.total_count,
                warningList: res.data.data_list
            })
        })
    }
    //查看详情
    toDetail = e =>{
        const { activeUlId } = this.state;
        this.props.history.push({ pathname: `/index/dataCentre/barrierGateData`, state: { id: activeUlId} })
    }


    render() {
        const { activeUlId, name, tabsList, activeTabs, proArray, warningList} = this.state;
        return (
            <div className="controlPancel_home" id="ContentMainList">
                <div className="nav_bar_child_list" id="nav_bar_child_list">
                    <div className="title">项目列表</div>
                    <List
                        id="nav_bar_child_list_nav"
                        itemLayout="horizontal"
                        dataSource={proArray}
                        renderItem={item => (
                            <List.Item className={activeUlId === item.id ? "active" : ''}>
                                <div className={activeUlId === item.id ? 'ulDot' : 'ulDot2'}></div>
                                <List.Item.Meta
                                    className="ulTitle"
                                    onClick={this.ulClick.bind(this, item.id)}
                                    title={item.project_name}
                                    description={`${item.lane_in_count}进${item.lane_out_count}出${(() => {
                                        if (item.project_phase === 1) {
                                            return ' - 厂区建设阶段'
                                        } else if (item.project_phase === 2) {
                                            return ' - 道闸施工阶段'
                                        } else if (item.project_phase === 3) {
                                            return ' - 软件调试阶段'
                                        } else if (item.project_phase === 4) {
                                            return ' - 维保期内'
                                        } else {
                                            return ' - 服务到期'
                                        }
                                    })()}`}
                                />
                                {activeUlId === item.id ? <img alt="" className="jiantou" src={require('../../../assets/img/ulblue.png')} /> : <img className="jiantou" src={require('../../../assets/img/grey.png')} />}
                            </List.Item>
                        )}
                    />
                </div>
                <div className="has_list_conent">
                    {/* 面包屑组件 */}
                    <BreadcrumbNav />
                    <div id="content-detail">
                        <div className="innerCon">
                            <div className="tipss">
                                <span className="blue"></span>
                                <span>首页</span>
                            </div>
                            <div className="header">
                                <div className="PassingStatistics">
                                    过车统计
                                </div>
                                <div className="time">
                                    {activeTabs === 0 ? <DatePicker onChange={this.onChangeWeek} defaultValue={moment()} format={customWeekStartEndFormat} picker="week" /> :
                                        activeTabs === 1 ? <DatePicker onChange={this.onChangeMonth} defaultValue={moment()} format={monthFormat} picker="month" /> :
                                            <DatePicker onChange={this.onChangeYear} defaultValue={moment()} format={yearFormat} picker="year" />}
                                    <div className="tabs">
                                        {tabsList.map((el, i) => (
                                            <div key={i} className={activeTabs === i ? 'active cell' : "cell"} onClick={this.setTime.bind(this, i)}>{el}</div>
                                        ))}

                                    </div>
                                </div>
                            </div>

                            <div id="main" style={{ width: '100%', height: 400 }}></div>
                            <div className="table">
                                <div className="topcon">
                                    <span className="tit"></span>
                                    <span>校验不通过车辆</span>
                                    <span className="lookDetail" onClick={this.toDetail.bind(this)}>查看详情 {'>'} </span>
                                </div>
                                <Table dataSource={warningList} pagination={false} rowKey={record => record.id} scroll={{ x: '100%' }} locale={{ emptyText: '暂无数据' }}>
                                    <Column title="车牌号" dataIndex="plate_number" width='150px' key='1' />
                                    <Column title="白名单" dataIndex="truck_number" width='150px' key='2' />
                                    <Column title="车道编号" render={item => `0${item.lane_num}号车道`} width='150px' key='3' />
                                    <Column title="出入口" render={item => item.lane_type === '1' ? '入口' : '出口'} width='150px' key='4' />
                                    <Column title="失败原因" dataIndex="no_entry_reason" width='150px' key='5' />
                                    <Column title="发生时间" dataIndex="add_time" width='150px' key='6' />
                                    <Column title="" width="0px" key="12" fixed="right" />
                                </Table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Home;